<div class="clearfix">
	<div class="row wrapper dashborad" ng-controller="DashboradGraphCtrl">
		<div class="col-md-12">
			<div class="panel panel-default m-b">
				<div class="panel-heading">概况</div>
				<div class="panel-detail" style="padding: 0 12px">
					<div class="col-md-4 v-box">
						<div class="small-box">
							<div class="small-box-img bg-green">
								<img src="/statics/img/dashborad/vmware.png" alt="">
							</div>
							<div class="small-box-count">
								<div class="font-large">VCenter</div>
								<div>
									<div>总数量：{{dashboradData.abstracts.vmware.total}}</div>
									<div>宿主机：{{dashboradData.abstracts.vmware.hosts}}</div>
									<div>虚拟机：{{dashboradData.abstracts.vmware.vms}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 v-box">
						<div class="small-box">
							<div class="small-box-img bg-blue">
								<img src="/statics/img/dashborad/openstack.png" alt="">
							</div>
							<div class="small-box-count">
								<div class="font-large">OpenStack</div>
								<div>
									<div>总数量：{{dashboradData.abstracts.openstack.total}}</div>
									<div>宿主机：{{dashboradData.abstracts.openstack.hosts}}</div>
									<div>虚拟机：{{dashboradData.abstracts.openstack.vms}}</div>
								</div>
							</div>
						</div>
					</div>
					<!--<div class="col-md-3 v-box">-->
						<!--<div class="small-box">-->
							<!--<div class="small-box-img bg-yellow">-->
								<!--<img src="/statics/img/dashborad/app.png" alt="">-->
							<!--</div>-->
							<!--<div class="small-box-count">-->
								<!--<div class="font-large">应用</div>-->
								<!--<div>-->
									<!--<div>总数量：{{dashboradData.abstracts.application.total}}</div>-->
									<!--<div>宿主机：{{dashboradData.abstracts.application.hosts}}</div>-->
								<!--</div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
					<div class="col-md-4 v-box">
						<div class="small-box">
							<div class="small-box-img bg-purple">
								<img src="/statics/img/dashborad/alarm.png" alt="">
							</div>
							<div class="small-box-count">
								<div class="font-large">告警</div>
								<div>
									<div>总数：{{dashboradData.abstracts.alarm.total}}</div>
									<div>严重：{{dashboradData.abstracts.alarm.dangers}}</div>
									<div>警告：{{dashboradData.abstracts.alarm.warns}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="panel panel-default m-b">
				<div class="panel-heading">VCenter</div>
				<div class="panel-detail">
					<div class="col-md-4 chart" ng-if="isDataLoad" style="height: 330px" ng-dashborad-bar-stack-chart=""  data="dashboradData.vmwares.hosts" options="options.vHost"></div>
					<div class="col-md-4 chart" ng-if="isDataLoad" style="height: 330px" ng-dashborad-bar-stack-chart=""  data="dashboradData.vmwares.vms" options="options.vVm"></div>
					<div class="col-md-4 chart chart-progress"  style="height: 330px">
						<div class="font-large m-t-xs">资源监控</div>
						<div class="col-md-12 progress-cell" style="margin-top: 64px;">
							<div class="progress-text">CPU</div>
							<progressbar value="dashboradData.vmwares.cpu" type="v-blue" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.vmwares.cpu}}%</div>
						</div>
						<div class="col-md-12 progress-cell">
							<div class="progress-text">内存</div>
							<progressbar value="dashboradData.vmwares.mem" type="v-green" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.vmwares.mem}}%</div>
						</div>
						<div class="col-md-12 progress-cell">
							<div class="progress-text">磁盘</div>
							<progressbar value="dashboradData.vmwares.disk" type="v-purple" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.vmwares.disk}}%</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="panel panel-default m-b">
				<div class="panel-heading">OpenStack</div>
				<div class="panel-detail">
					<div class="col-md-4 chart" ng-if="isDataLoad" style="height: 330px" ng-dashborad-pie-loop-chart=""  data="dashboradData.openstacks.hosts" options="options.oHost"></div>
					<div class="col-md-4 chart" ng-if="isDataLoad" style="height: 330px" ng-dashborad-pie-loop-chart=""  data="dashboradData.openstacks.vms" options="options.oVm"></div>
					<div class="col-md-4 chart chart-progress"  style="height: 330px">
						<div class="font-large m-t-xs">资源监控</div>
						<div class="col-md-12 progress-cell" style="margin-top: 64px;">
							<div class="progress-text">CPU</div>
							<progressbar value="dashboradData.openstacks.cpu" type="v-blue" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.openstacks.cpu}}%</div>
						</div>
						<div class="col-md-12 progress-cell">
							<div class="progress-text">内存</div>
							<progressbar value="dashboradData.openstacks.mem" type="v-green" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.openstacks.mem}}%</div>
						</div>
						<div class="col-md-12 progress-cell">
							<div class="progress-text">磁盘</div>
							<progressbar value="dashboradData.openstacks.disk" type="v-purple" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">{{dashboradData.openstacks.disk}}%</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="col-md-6" ng-if="false">
			<div class="panel panel-default m-b">
				<div class="panel-heading">应用</div>
				<div class="panel-detail v-app-chart">
					<div class="col-md-3 bg-white" style="height: 210px">
						<div class="col-md-12 m-t-lg">宿主机数量</div>
						<div class="col-md-12 v-app" >
							<i class="fa fa-circle-o blue"></i> 开机：30
						</div>
						<div class="col-md-12 v-app">
							<i class="fa fa-circle-o green"></i> 关机：20
						</div>
						<div class="col-md-12 v-app">
							<i class="fa fa-circle-o yellow"></i> 异常：2
						</div>
					</div>
					<div class="col-md-3 chart" ng-if="isDataLoad" style="height: 210px" ng-dashborad-pie-loop-chart=""  data="dashboradData.alarms" options="options.app"></div>
					<div class="col-md-6 chart" style="height: 210px">
						<div class="col-md-12 progress-cell sm">
							<div>镜像数量</div>
							<progressbar value="80" type="v-blue" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">70%</div>
						</div>
						<div class="col-md-12 progress-cell sm">
							<div>应用总数量</div>
							<progressbar value="80" type="v-green" class="progress-sm m-t-xs" ></progressbar>
							<div class="progress-text m-l">70%</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6" ng-if="false">
			<div class="panel panel-default m-b">
				<div class="panel-heading">告警</div>
				<div class="panel-detail">
					<div class="col-md-7 bg-white" ng-if="isDataLoad" style="height: 210px" ng-dashborad-pie-loop-chart="" data="dashboradData.alarm" options="options.alarm"></div>
					<div class="col-md-5 bg-white" style="height: 210px">
						<div class="col-md-12 v-alarm m-t-xl">
							<div class="pull-left"><img style="width: 50px" src="/statics/img/dashborad/normal.png" alt=""></div>
							<div class="pull-left m-l">
								<div class="title">警告</div>
								<div>数量：<span class="text-normal">20</span></div>
							</div>
						</div>
						<div class="col-md-12 v-alarm m-t-lg">
							<div class="pull-left"><img style="width: 50px" src="/statics/img/dashborad/danger.png" alt=""></div>
							<div class="pull-left m-l">
								<div class="title">严重</div>
								<div>数量：<span class="text-danger">20</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

